<template>
	<view class="tabs">
		<cu-custom bgColor="bg-gradual-orange" :isBack="true">
			<block slot="content">商家列表</block>
		</cu-custom>

		<!-- <view class="search-bar-box">
			<view class="search-bar">
			<input  type="text" v-model="searchText" @input="onInput" @confirm="onSearch"
				placeholder="请输入商家名称搜索" />
				</view>
		</view> -->

		<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="false"
			:scroll-into-view="scrollInto">
			<view v-for="(tab,index) in tabBars" :key="tab.id" class="uni-tab-item" :id="'cid_' + tab.id"
				:data-current="index" @tap="ontabtap">
				<text class="uni-tab-item-title"
					:class="tabIndex==index ? 'uni-tab-item-title-active' : ''">{{tab.title}}</text>
			</view>
		</scroll-view>

		<view class="line-h"></view>


		<!-- {{newsList}} -->

		<swiper :current="tabIndex" class="swiper-box" style="flex: 1;" :duration="300" @change="ontabchange">
			<swiper-item class="swiper-item" v-for="(tab,index1) in newsList" :key="index1">

				<scroll-view class="scroll-v list" enableBackToTop="true" scroll-y @scrolltolower="loadMore(index1)"
					@scroll="onScroll" :scroll-top="scrollTop">

					<my-shops :shops="item" v-for="item in tab.data" :key="item.id" @tap="goDetail(item.id)"></my-shops>
					<uni-load-more :status="tab.more"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="back-top" v-if="flag" @tap="backTop()">
			<text class="icon cuIcon-top"></text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import api from "@/api/";
	import MyShops from "@/components/MyShops";
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	// 缓存每页最多
	const MAX_CACHE_DATA = 100;
	// 缓存页签数量
	const MAX_CACHE_PAGE = 3;
	export default {
		components: {
			MyShops
		},
		data() {
			return {
				scrollTop: 0,
				cid: 1,
				newsList: [],
				cacheTab: [],
				tabIndex: 0,
				tabBars: [],
				scrollInto: "",
				flag: false,
				locationRes: {
					longitude: 0,
					latitude: 0,
				},
				searchText: ''
			}
		},
		computed: {
			...mapState(['userLocation']),
		},
		onLoad(params) {
			const {
				cid
			} = params;
			this.cid = cid || 1;
			this.getCateory()
			this.getlocation()
		},
		methods: {
			async getlocation() {
				let that = this
				await uni.getLocation({
					success(result) {
						that.locationRes.latitude = result.latitude // 将纬度存起来
						that.locationRes.longitude = result.longitude // 将经度存起来
					},
					fail: error => {

					}
				});
			},
			async getCateory() {
				let res = await api.cateList()
				if (res.code == 1) {
					this.tabBars = res.data.list
					await this.$store.dispatch('getLocation');
					this.tabBars.forEach((tabBar, index) => {
						this.newsList.push({
							data: [],
							page: 0,
							more: 'more',
						});
						if (tabBar.id == this.cid) {
							this.switchTab(index)
						}
					});
				}
			},
			async getList(index) {
				// let that = this
				let activeTab = this.newsList[index];
				if (activeTab.more === 'noMore') {
					return;
				}


				activeTab.more = 'loading'
				activeTab.page++;

				let res = await api.shopList({
					page: activeTab.page,
					cid: this.tabBars[index].id,
					lng: this.locationRes.longitude,
					lat: this.locationRes.latitude
				})
				if (res.code == 1) {
					if (res.data.list.length <= 0) {
						activeTab.more = 'noMore';
					} else {
						activeTab.more = 'more';
					}
					activeTab.data = activeTab.data.concat(res.data.list);
				}
			},
			async goDetail(id) {
				uni.navigateTo({
					url: `/pages/home/detail?id=${id}`
				})
			},
			loadMore(e) {
				setTimeout(() => {
					this.getList(this.tabIndex);
				}, 500)
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);
			},
			ontabchange(e) {
				let index = e.target.current || e.detail.current;
				this.switchTab(index);
			},
			switchTab(index) {
				if (this.newsList[index].data.length === 0) {
					this.getList(index);
				}

				if (this.tabIndex === index) {
					return;
				}

				// 缓存 tabId
				if (this.newsList[this.tabIndex].data.length > MAX_CACHE_DATA) {
					let isExist = this.cacheTab.indexOf(this.tabIndex);
					if (isExist < 0) {
						this.cacheTab.push(this.tabIndex);
						//console.log("cache index:: " + this.tabIndex);
					}
				}

				this.tabIndex = index;
				this.scrollInto = 'cid_' + this.tabBars[index].id;

				// 释放 tabId
				if (this.cacheTab.length > MAX_CACHE_PAGE) {
					let cacheIndex = this.cacheTab[0];
					this.clearTabData(cacheIndex);
					this.cacheTab.splice(0, 1);
					//console.log("remove cache index:: " + cacheIndex);
				}
			},
			clearTabData(e) {
				this.newsList[e].data.length = 0;
				this.newsList[e].loadingText = "加载更多...";
			},
			onScroll(e) {
				if (e.detail.scrollTop > 600) {
					//当距离大于600时显示回到顶部按钮
					this.flag = true
				} else {
					//当距离小于600时隐藏回到顶部按钮
					this.flag = false
				}
			},
			backTop() {
				this.scrollTop = 1000;
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			}
		}
	}
</script>

<style lang="less">
	page {
		width: 100%;
		min-height: 100%;
		display: flex;
	}

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		height: 100vh;
		display: flex;
	}

	.scroll-h {
		width: 750upx;
		height: 80upx;
		flex-direction: row;
		white-space: nowrap;

		.uni-tab-item {
			display: inline-block;
			flex-wrap: nowrap;
			padding: 0 10px;

			.uni-tab-item-title {
				color: #555;
				font-size: 30upx;
				height: 80upx;
				line-height: 80upx;
				flex-wrap: nowrap;
				/* #ifndef APP-PLUS */
				white-space: nowrap;
				/* #endif */
			}

			.uni-tab-item-title-active {
				color: #e54d42;
			}
		}
	}

	.line-h {
		height: 1upx;
		background-color: #ddd;
	}

	.swiper-box {
		flex: 1;
		display: flex;

		.swiper-item {
			flex: 1;
			display: flex;
			flex-direction: row;

			.scroll-v {
				flex: 1;
				/* #ifndef MP-ALIPAY */
				flex-direction: column;
				/* #endif */
				width: 750upx;
				display: flex;
				align-items: stretch;
				align-content: flex-start;
			}
		}
	}

	.back-top {
		position: fixed;
		bottom: 80px;
		right: 20px;
		z-index: 999;
		font-size: 20px;
		color: #FFFFFF;
		background-color: #00000060;
		width: 35px;
		height: 35px;
		border-radius: 50%;
		text-align: center;
		line-height: 35px;
	}
</style>